import React, { Component } from 'react';
import PropTypes from 'prop-types';
import GroupSvg from './images/group.svg';
import DotsSvg from './images/dots.svg';
import RightRowSvg from './images/right-row.svg';
import Dropdown from '@components/dropdown';
import cn from 'classnames';
import _ from 'lodash';
import './index.less';
import { Tooltip } from 'antd';

class OrgCard extends Component {
  static propTypes = {
    org: PropTypes.object,
    className: PropTypes.string,
    onClickOperation: PropTypes.func,
    onExpan: PropTypes.func,
    dispatchOperate: PropTypes.func
  };
  operatOrg = e => {
    e.domEvent.stopPropagation();
    if (this.propTypes.onClickOperation instanceof Function) {
      let orgId = _.get(this.props, 'org.id', '');
      this.props.onClickOperation(e.key, orgId);
    }
  };
  render() {
    let { org, onExpan, dispatchOperate, className } = this.props;
    let siteCount = _.get(org, 'site_count', 0),
      hasChildren = _.get(org, 'has_children', false),
      hasIpSegment = _.get(org, 'hasIpSegment', false);

    let deleteMenuItem = null;
    if (siteCount || hasChildren || hasIpSegment) {
      deleteMenuItem = {
        title: (
          <Tooltip
            overlayClassName={'org-c-card-unable-delete-overlay'}
            title="无法删除！请确认该部门是否有所属资产或所属IP段或存在下属部门"
          >
            删除
          </Tooltip>
        ),
        disableConfirm: true,
        className: 'unable-delete'
      };
    } else {
      deleteMenuItem = {
        title: '删除',
        info: '是否要删除该部门?',
        closeDropdownBeforeConfirm: true,
        className: 'delete',
        onConfirm: () => dispatchOperate('delete', org)
      };
    }

    const more = {
      title: <img className="dots" src={DotsSvg} />,
      menus: [
        {
          title: '创建同级部门',
          closeDropdownBeforeConfirm: true,
          disableConfirm: true,
          onConfirm: () => dispatchOperate('createSib', org)
        },
        {
          title: '创建下属部门',
          closeDropdownBeforeConfirm: true,
          disableConfirm: true,
          onConfirm: () => dispatchOperate('createChild', org)
        },
        {
          title: '管理部门资产',
          closeDropdownBeforeConfirm: true,
          disableConfirm: true,
          onConfirm: () => dispatchOperate('manageSites', org)
        },
        {
          title: '编辑',
          closeDropdownBeforeConfirm: true,
          disableConfirm: true,
          onConfirm: () => dispatchOperate('edit', org)
        },
        deleteMenuItem
      ]
    };
    return (
      <div className={cn('org-c-card', className)}>
        <img className="group" src={GroupSvg} />
        <div className="name-count">
          <span className="name">{_.get(org, 'name', '-')}</span>
          <span className="count">({_.get(org, 'site_count', 0)})</span>
        </div>
        {hasChildren && <img className="right-row" src={RightRowSvg} onClick={onExpan} />}
        <div className="drop-down-wrapper">
          <Dropdown {...more} />
        </div>
      </div>
    );
  }
}

export default OrgCard;
